<template>
  <div class="svg-icon-container" @mouseenter="hover = true" @mouseleave="hover = false">
    <svg
      v-if="props.hoverColor !== '' && hover"
      aria-hidden="true"
      class="svg-icon"
      :width="svgSize"
      :height="svgSize"
      :fill="props.hoverColor"
    >
      <use :xlink:href="symbolId" />
    </svg>
    <svg
      v-else
      aria-hidden="true"
      class="svg-icon"
      :width="svgSize"
      :height="svgSize"
      :fill="props.color"
    >
      <use :xlink:href="symbolId" />
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
const props = defineProps({
  prefix: {
    type: String,
    default: 'icon'
  },
  name: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: '#333'
  },
  size: {
    type: String,
    default: '1em'
  },
  hoverColor: {
    type: String,
    default: ''
  }
})

const svgSize = ref(props.size)
watch(
  () => props.size,
  (newSize) => {
    svgSize.value = newSize
  }
)

//鼠标移动元素上
const hover = ref(false)

const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
<style lang="scss" scoped>
.svg-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
</style>
